﻿@model MvcApplicationDataHound.Models.Employee
@{
    ViewBag.Title = "Page Title";
}

<h2>Please enter UPC's</h2>
<p>
    
</p>
@using (Html.BeginForm())
{
        @Html.AntiForgeryToken()
        <fieldset>
            <legend/> @*Legend is required*@
            @*<div class="UDTID-flow-row">
                    <div class="UDTID-flow-editor-label">
                        @Html.LabelFor(model => model.Name)
                    </div> 
                    <div class="UDTID-flow-editor-field">
                        @Html.EditorFor(model => model.Name)
                        @Html.ValidationMessageFor(model => model.Name)
                    </div>
            </div>
            <div class="UDTID-flow-row">
                    <div class="UDTID-flow-editor-label">
                        @Html.LabelFor(model => model.JobPosition)
                    </div>
                    <div class="UDTID-flow-editor-field">
                        @Html.DropDownListFor(
                            model => model.JobPosition,
                            new SelectList(MvcApplicationDataHound.Models.JobPosition.GetJobPositions(), "Code", "Position"),
                            "-- Select --",
                            new { @class = "skill-level" })
                        @Html.ValidationMessageFor(model => model.JobPosition)
                    </div>
            </div>*@
    <table id="skills-table">
            <thead>
                <tr>
                    <th style="width:20px;">&nbsp;</th>
                    <th style="width:160px;">Skill</th>
                    <th style="width:150px;">Level</th>
                    <th style="width:32px;">&nbsp;</th>
                </tr>
            </thead>
            <tbody>

            @for (var j = 0; j < Model.Skills.Count; j++)
            {
                <tr>
                    <th><span class="UDTID-rownumber"></span></th>
                    <td>
                        @Html.TextBoxFor(model => model.Skills[j].Title, new { @class = "skill-title" })
                        @Html.ValidationMessageFor(model => model.Skills[j].Title)
                    </td>
                    @*<td>
                        @Html.MyDropDownListFor(
                            model => model.Skills[j].Level,
                            new SelectList(MvcApplicationDataHound.Models.SkillLevel.GetSkillLevels(), "Code", "Description", Model.Skills[j].Level),
                            "-- Select --",
                            new {@class = "skill-level"}
                            )
                        @Html.ValidationMessageFor(model => model.Skills[j].Level)
                    </td>*@
                    <td>
                        @if (j < Model.Skills.Count - 1)
                        {
                            <button type="button" class="UDTID-remove-row" title="Delete row"></button>
                        }
                        else
                        {
                            <button type="button" class="UDTID-new-row" title="New row"></button> 
                        }
                    </td>
                </tr>
            }
            
            </tbody>
        </table>
        
    </fieldset>
        <p>
            <button type="submit" id="submit">Submit</button>
            @*<button type="reset" id="reset" onclick="$(this).resetValidation()">Reset</button>*@
        </p>
}

<script type="text/javascript">
    var addRow = function () {
        addTableRow($("#skills-table"));
        return false;
    };

    var deleteRow = function (event) {
        $(event.target).closest("tr").remove();
        return false;
    };

    function addTableRow(table) {
        /* Sources:
        http://www.simonbingham.me.uk/index.cfm/main/post/uuid/adding-a-row-to-a-table-containing-form-fields-using-jquery-18
        http://stackoverflow.com/questions/5104288/adding-validation-with-mvc-3-jquery-validator-in-execution-time
        */
        
        var $ttc = $(table).find("tbody tr:last");
        var $tr = $ttc.clone();

        $tr.find("input,select").attr("name", function () { // find name in the cloned row
            var parts = this.id.match(/(\D+)_(\d+)__(\D+)$/); // extract parts from id, including index
            return parts[1] + "[" + ++parts[2] + "]." + parts[3]; // build new name
        }).attr("id", function () { // change id also
            var parts = this.id.match(/(\D+)_(\d+)__(\D+)$/); // extract parts
            return parts[1] + "_" + ++parts[2] + "__" + parts[3]; // build new id
        });
        $tr.find("span[data-valmsg-for]").attr("data-valmsg-for", function() { // find validation message
            var parts = $(this).attr("data-valmsg-for").match(/(\D+)\[(\d+)]\.(\D+)$/); // extract parts from the referring attribute
            return parts[1] + "[" + ++parts[2] + "]." + parts[3]; // build new value
        });
        $ttc.find(".UDTID-new-row").attr("class", "UDTID-remove-row").attr("title", "Delete row").unbind("click").click(deleteRow); // change buttin function
        $tr.find(".UDTID-new-row").click(addRow); // add function to the cloned button

        // reset fields in the new row
        $tr.find("select").val(""); 
        $tr.find("input[type=text]").val("");
        
        // add cloned row as last row  
        $(table).find("tbody tr:last").after($tr);

        // Find the affected form
        var $form = $tr.closest("FORM");

        // Unbind existing validation
        $form.unbind();
        $form.data("validator", null);

        // Check document for changes
        $.validator.unobtrusive.parse(document);

        // We could re-validate with changes
        // $form.validate($form.data("unobtrusiveValidation").options);
    };

    (function ($) { 
        /* Source: 
        http://www.johnculviner.com/post/2011/11/16/ClearReset-MVC-3-Form-and-Unobtrusive-jQuery-Client-Validation.aspx
        */

        $.fn.resetValidation = function () {
        var $form = this.closest('form');

        //reset jQuery Validate's internals
        $form.validate().resetForm();

        //reset unobtrusive validation summary, if it exists
        $form.find("[data-valmsg-summary=true]")
        .removeClass("UDTID-validation-summary-errors")
        .addClass("UDTID-validation-summary-valid")
        .find("ul").empty();

        //reset unobtrusive field level, if it exists
        $form.find("[data-valmsg-replace]")
        .removeClass("UDTID-field-validation-error")
        .addClass("UDTID-field-validation-valid")
        .empty();

        return $form;
        };
    })(jQuery);

    $(function() {
        $(".UDTID-new-row").click(addRow);
        $(".UDTID-remove-row").click(deleteRow);
    });
</script>

